
Main = Ext.extend(Ext.Viewport, {
    /**
     * 中间区域
     */
    center : new Ext.TabPanel({
        id : "MainTab",
        region : "center",
        activeTab : 0,
        autoScroll : true, // 自动添加滚动条
        height : 80,
        split : true, // 添加分割线
        plugins : new Ext.ux.TabCloseMenu(),
        items : {
            closeable : true,
            iconCls : "houfei-homeTabIcon", // tab页图片样式
            title : "首页"
        }
    }),
    /**
     * 构造方法
     */
    constructor : function() {
        /**
         * 将父类的构造拷贝过来
         */
        Main.superclass.constructor.call(this, {
            layout : "border", // 指定布局为border布局
            items : [
                {
                    region : "north", // 北部布局
                    xtype : "panel", // 指定容器为panel
                    border : false, // 不要边框
                    height : 60, // 高度
                    baseCls:"x-plain"
                },
                {
                    region : "west",
                    xtype : "panel",
                    layout : "accordion", // 手风琴布局
                    title : "欢迎:" + Ext.UserName ,
                    split : true, // 添加分割线
                    collapsible : true, // 自动伸缩
                    width : 200, // 宽度
                    layoutConfig : {
                        // 展开折叠是否有动画效果
                        animate : true
                    },
                    // 事件监听
                    listeners : {
                        'expand' : {
                            fn : this.onExpandPanel,
                            scope : this
                        },
                        'collapse' : {
                            fn : this.onCollapsePanel,
                            scope : this
                        }
                    },
                    items : [
                        {
                            title : "系统管理", // 标题
                            iconCls:"houfei-checkIcon",
                            xtype : "treepanel", // 指定类型为树面板
                            autoScroll : true, // 自动添加滚动条
                            border : false, // 不要边框
                            id : "mytree",
                            tools : [
                                {
                                    id : 'refresh', // 刷新按钮
                                    handler : this.onRefreshTreeNodes,
                                    scope : this
                                }
                            ],
                            items:[
                                {
                                    id:"employee",
                                    scope:this
                                }
                            ],
                            // 树的加载器
                            loader : new Ext.tree.TreeLoader({
                                // tree数据的远程服务器地址,相当于proxy,每次请求会将node的id值传递给服务器
                                dataUrl : "adminPermission.action?action=jsonTree"
                            }),
                            // 根节点
                            root : new Ext.tree.AsyncTreeNode({
                                text : "词表管理",
                                iconCls : "houfei-treeRootIcon",
                                id : "0"  ,
                                expandable:true

                            }),
                            // 监听事件
                            listeners : {
                                "click" : {
                                    fn : this.onTreeNodeClick,
                                    scope : this
                                } ,
                                "afterrender":{
                                    fn:this.onRefreshTreeNodes,
                                    scope : this
                                }
                            }
                        }
                    ]
                },
                this.center,
                {
                    region : "south", // 南方布局
                    split : true, // 添加分割线
                    xtype : "panel", // 用panel作为容器
                    border : false, // 不要边框
                    frame : true, // 强制背景色
                    height : 27,// 高度
                    html : "<div align=\"right\"><font color=\"#15428b\">www.tbs.com.cn</font></div>"
                }
            ]
        })

    },

    /**
     * 动态添加标签页
     *
     * @param {}
            *            _name 节点的text值
     * @param {}
            *            _id 节点id
     * @param {}
            *            _css css
     * @param {}
            *            _link 节点的链接
     */
    addTab : function(_name, _id, _css, _link) {
        // 动态创建tab标签的id
        var tabId = "tab_" + _id;
        // 动态创建tab标签的标题
        var tabTitle = _name;
        // 动态获取tree的某个节点的链接
        var tabLink = _link;
        // 获取主tab组件
        var centerPanel = Ext.getCmp("MainTab");
        // 根据id获取centerPanel组件的直接子组件的引用
        var tab = centerPanel.getComponent(tabId);
        // 这个要传到load页去，很关键，以后的布局要靠它
        var subMainId = 'tab_' + _id + '_main';
        /**
         * 如果可以获取到tab页,就不用再次添加tab页了 (获取不到时tab=undefined)
         * (也就是说如果当前tab页已经渲染就不用再次添加该tab了)
         */
        if (!tab) {
            // 动态创建tab
            var newTab = centerPanel.add(new Ext.Panel({
                id : tabId, // tab的唯一id
                title : tabTitle, // tab的标题
                iconCls : "houfei-treeNodeLeafIcon", // 图片
                layout : 'fit', // 填充布局,它不会让load进来的东西改变大小
                border : false, // 无边框
                closable : true, // 有关闭选项卡按钮
                listeners : {
                    // 侦听tab页被激活里触发的动作
                    activate : this.onActiveTabSize,
                    scope : this
                }
            }));

            // 激活加入的tab页(将新创建的tab页获取焦点)
            centerPanel.setActiveTab(newTab);

            newTab.load({
                url : tabLink, // 请求服务器的地址
                method : "post", // post请求方式
                params : {
                    // 这里是关键的一个参数，传给load页，布局的关键
                    subMainId : subMainId
                },
                scope : this, // 范围
                discardUrl : true, // 丢弃url
                nocache : true, // 不缓存
                text : "加载中,请稍候……",
                timeout : 3000, // 延时3秒
                scripts : true
                // 允许执行script
            });
        } else {
            // 激活已存在的tab页
            centerPanel.setActiveTab(tab);
        }
    },

    /**
     * 激活TAB页时改变内部容器的大小
     */
    onActiveTabSize : function() {
        // 获取当前活动的tab页的body元素的宽度 (不含任何框架元素)
        var w = Ext.getCmp('MainTab').getActiveTab().getInnerWidth();
        // 获取当前活动的tab页的body元素的高度 (不含任何框架元素)
        var h = Ext.getCmp('MainTab').getActiveTab().getInnerHeight();
        // 获取当活动的tab页的id
        var Atab = Ext.getCmp('MainTab').getActiveTab().id;

        // 获取组件
        var submain = Ext.getCmp(Atab + "_main");

        if (submain) {
            submain.setWidth(w);
            submain.setHeight(h);
        }
        var FLZTw = Ext.getCmp("FLZTProcessWindow");
        if (FLZTw) {
            //alert(FLZTw.getWidth());
            FLZTw.doLayout();
        }
        var ZTFLw = Ext.getCmp("ZTFLProcessWindow");
        if (ZTFLw) {
            //alert(FLZTw.getWidth());
            ZTFLw.doLayout();
        }
        var ZTFLVerifyWindow = Ext.getCmp("ZTFLVerifyWindow");
        if (ZTFLVerifyWindow) {
            //alert(FLZTw.getWidth());
            ZTFLVerifyWindow.doLayout();
        }
        var FLZTVerifyWindow = Ext.getCmp("FLZTVerifyWindow");
        if (FLZTVerifyWindow) {
            //alert(FLZTw.getWidth());
            FLZTVerifyWindow.doLayout();
        }
    },

    /**
     * treePanel的刷新按钮事件
     *
     * @param {}
            *            _treePanel
     */
    onRefreshTreeNodes : function() {
        Ext.getCmp("mytree").root.reload();

    },

    /**
     * 树的节点单击事件
     *
     * @param {}
            *            _node 节点
     * @param {}
            *            _e
     */
    onTreeNodeClick : function(_node, _e) {
        // 如果当前节点为叶子节点
        if (_node.isLeaf()) {
            // 获取当前节点的值
            var _nodeText = _node.attributes.text;
            // 获取当前节点的连接
            //alert( _node.attributes.linkUrl);
            var _nodeLink = _node.attributes.linkUrl;
            // 获取当前节点的id
            var _nodeId = _node.attributes.id;
            // 调用动态添加Tab页方法
            this.addTab(_nodeText, _nodeId, '_css', _nodeLink);

        }
    },

    /**
     * 面板展开事件
     *
     * @param {}
            *            _nowCmp
     */
    onExpandPanel : function(_nowCmp) {
        // alert('展开之后触发');
        this.onActiveTabSize();
    },
    /**
     * 面板闭合事件
     *
     * @param {}
            *            _nowCmp
     */
    onCollapsePanel : function(_nowCmp) {
        // alert('面板关闭后触发');
        this.onActiveTabSize();
    }

});